<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>旅游目的地玩法管理系统测试</title>
    <style>
        * {
            font-family: "微软雅黑", sans-serif;
            box-sizing: border-box;
        }
        body {
            max-width: 1200px;
            margin: 20px auto;
            padding: 20px;
            background-color: #f0f2f5;
        }
        .tab-container {
            margin-top: 20px;
            background-color: white;
            border-radius: 8px;
            padding: 20px;
        }
        .tab {
            display: none;
        }
        .tab:checked + label {
            background-color: #1a73e8;
            color: white;
        }
        label {
            display: inline-block;
            padding: 10px 20px;
            margin-right: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
        }
        .tab-content {
            margin-top: 20px;
            display: none;
            padding: 20px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
        }
        .tab:checked ~ .tab-content {
            display: block;
        }
        .form-group {
            margin-bottom: 15px;
        }
        input, select, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #1a73e8;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #1556b0;
        }
        .result {
            margin-top: 20px;
            padding: 10px;
            border-radius: 4px;
        }
        .success {
            color: #2e7d32;
            border: 1px solid #c8e6c9;
            background-color: #e8f5e9;
        }
        .error {
            color: #b71c1c;
            border: 1px solid #ef9a9a;
            background-color: #ffebee;
        }
    </style>
</head>
<body>
<h1>旅游目的地玩法管理系统测试</h1>

<div class="tab-container">
    <!-- 选项卡导航 -->
    <input type="radio" name="tabs" id="tab-destination" checked>
    <label for="tab-destination">目的地管理</label>

    <input type="radio" name="tabs" id="tab-playmethod">
    <label for="tab-playmethod">玩法管理</label>

    <input type="radio" name="tabs" id="tab-relation">
    <label for="tab-relation">关联关系管理</label>

    <!-- 目的地管理选项卡内容 -->
    <div class="tab-content" id="destination-content">
        <h2>目的地管理</h2>
        <div id="destination-result" class="result"></div>

        <!-- 添加表单 -->
        <div class="form-group">
            <h3>添加目的地</h3>
            <label>名称：</label>
            <input type="text" id="dest-name" required>
            <label>位置：</label>
            <input type="text" id="dest-location">
            <label>描述：</label>
            <textarea id="dest-desc" rows="3"></textarea>
            <button onclick="addDestination()">添加</button>
        </div>

        <!-- 删除表单 -->
        <div class="form-group">
            <h3>删除目的地</h3>
            <label>ID：</label>
            <input type="number" id="dest-delete-id" required>
            <button onclick="deleteDestination()">删除</button>
        </div>

        <!-- 更新表单 -->
        <div class="form-group">
            <h3>更新目的地</h3>
            <label>ID：</label>
            <input type="number" id="dest-update-id" required>
            <label>新名称：</label>
            <input type="text" id="dest-update-name">
            <label>新位置：</label>
            <input type="text" id="dest-update-location">
            <label>新描述：</label>
            <textarea id="dest-update-desc" rows="3"></textarea>
            <button onclick="updateDestination()">更新</button>
        </div>

        <!-- 查询按钮 -->
        <button onclick="getAllDestinations()">查询所有目的地</button>
        <div id="destinations-list"></div>
    </div>

    <!-- 玩法管理选项卡内容 -->
    <div class="tab-content" id="playmethod-content">
        <h2>玩法管理</h2>
        <div id="playmethod-result" class="result"></div>

        <!-- 添加表单 -->
        <div class="form-group">
            <h3>添加玩法</h3>
            <label>名称：</label>
            <input type="text" id="method-name" required>
            <label>描述：</label>
            <textarea id="method-desc" rows="3"></textarea>
            <label>持续时间（HH:MM:SS）：</label>
            <input type="time" id="method-duration" required>
            <label>难度：</label>
            <select id="method-difficulty" required>
                <option value="简单">简单</option>
                <option value="中等">中等</option>
                <option value="困难">困难</option>
            </select>
            <button onclick="addPlayMethod()">添加</button>
        </div>

        <!-- 删除表单 -->
        <div class="form-group">
            <h3>删除玩法</h3>
            <label>ID：</label>
            <input type="number" id="method-delete-id" required>
            <button onclick="deletePlayMethod()">删除</button>
        </div>

        <!-- 更新表单 -->
        <div class="form-group">
            <h3>更新玩法</h3>
            <label>ID：</label>
            <input type="number" id="method-update-id" required>
            <label>新名称：</label>
            <input type="text" id="method-update-name">
            <label>新描述：</label>
            <textarea id="method-update-desc" rows="3"></textarea>
            <label>新持续时间：</label>
            <input type="time" id="method-update-duration">
            <label>新难度：</label>
            <select id="method-update-difficulty">
                <option value="简单">简单</option>
                <option value="中等">中等</option>
                <option value="困难">困难</option>
            </select>
            <button onclick="updatePlayMethod()">更新</button>
        </div>

        <!-- 查询按钮 -->
        <button onclick="getAllPlayMethods()">查询所有玩法</button>
        <div id="playmethods-list"></div>
    </div>

    <!-- 关联关系管理选项卡内容 -->
    <div class="tab-content" id="relation-content">
        <h2>目的地-玩法关联管理</h2>
        <div id="relation-result" class="result"></div>

        <!-- 添加表单 -->
        <div class="form-group">
            <h3>添加关联关系</h3>
            <label>目的地ID：</label>
            <input type="number" id="rel-dest-id" required>
            <label>玩法ID：</label>
            <input type="number" id="rel-method-id" required>
            <label>推荐等级（1-5）：</label>
            <input type="number" id="rel-level" min="1" max="5" required>
            <button onclick="addRelation()">添加</button>
        </div>

        <!-- 删除表单 -->
        <div class="form-group">
            <h3>删除关联关系</h3>
            <label>目的地ID：</label>
            <input type="number" id="rel-delete-dest-id" required>
            <label>玩法ID：</label>
            <input type="number" id="rel-delete-method-id" required>
            <button onclick="deleteRelation()">删除</button>
        </div>

        <!-- 更新表单 -->
        <div class="form-group">
            <h3>更新推荐等级</h3>
            <label>目的地ID：</label>
            <input type="number" id="rel-update-dest-id" required>
            <label>玩法ID：</label>
            <input type="number" id="rel-update-method-id" required>
            <label>新等级（1-5）：</label>
            <input type="number" id="rel-update-level" min="1" max="5" required>
            <button onclick="updateRelation()">更新</button>
        </div>

        <!-- 查询按钮 -->
        <button onclick="getRelationsByDestination(1)">查询目的地关联玩法（示例ID=1）</button>
        <div id="relations-list"></div>
    </div>
</div>

<script>
    // 后端接口基础地址，根据实际情况修改
    const API_URL = 'http://localhost:8080/api';

    // --------------------- 目的地操作 ---------------------
    function addDestination() {
        const data = {
            odestinationName: document.getElementById('dest-name').value,
            olocation: document.getElementById('dest-location').value,
            odescription: document.getElementById('dest-desc').value
        };

        fetch(`${API_URL}/destinations`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        })
            .then(response => handleResponse(response, 'destination-result'))
            .catch(error => showError('destination-result', '网络请求失败'));
    }

    function deleteDestination() {
        const id = document.getElementById('dest-delete-id').value;
        fetch(`${API_URL}/destinations/${id}`, { method: 'DELETE' })
            .then(response => handleResponse(response, 'destination-result'))
            .catch(error => showError('destination-result', '网络请求失败'));
    }

    function updateDestination() {
        const data = {
            odestinationId: document.getElementById('dest-update-id').value,
            odestinationName: document.getElementById('dest-update-name').value,
            olocation: document.getElementById('dest-update-location').value,
            odescription: document.getElementById('dest-update-desc').value
        };

        fetch(`${API_URL}/destinations`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        })
            .then(response => handleResponse(response, 'destination-result'))
            .catch(error => showError('destination-result', '网络请求失败'));
    }

    function getAllDestinations() {
        fetch(`${API_URL}/destinations`)
            .then(response => response.json())
            .then(data => {
                showSuccess('destination-result', `查询到 ${data.length} 条记录`);
                displayList('destinations-list', data);
            })
            .catch(error => showError('destination-result', '网络请求失败'));
    }

    // --------------------- 玩法操作 ---------------------
    function addPlayMethod() {
        const data = {
            oplayMethodName: document.getElementById('method-name').value,
            odescription: document.getElementById('method-desc').value,
            oduration: document.getElementById('method-duration').value,
            odifficulty: document.getElementById('method-difficulty').value
        };

        fetch(`${API_URL}/playMethods`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        })
            .then(response => handleResponse(response, 'playmethod-result'))
            .catch(error => showError('playmethod-result', '网络请求失败'));
    }

    function deletePlayMethod() {
        const id = document.getElementById('method-delete-id').value;
        fetch(`${API_URL}/playMethods/${id}`, { method: 'DELETE' })
            .then(response => handleResponse(response, 'playmethod-result'))
            .catch(error => showError('playmethod-result', '网络请求失败'));
    }

    function updatePlayMethod() {
        const data = {
            oplayMethodId: document.getElementById('method-update-id').value,
            oplayMethodName: document.getElementById('method-update-name').value,
            odescription: document.getElementById('method-update-desc').value,
            oduration: document.getElementById('method-update-duration').value,
            odifficulty: document.getElementById('method-update-difficulty').value
        };

        fetch(`${API_URL}/playMethods`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        })
            .then(response => handleResponse(response, 'playmethod-result'))
            .catch(error => showError('playmethod-result', '网络请求失败'));
    }

    function getAllPlayMethods() {
        fetch(`${API_URL}/playMethods`)
            .then(response => response.json())
            .then(data => {
                showSuccess('playmethod-result', `查询到 ${data.length} 条记录`);
                displayList('playmethods-list', data);
            })
            .catch(error => showError('playmethod-result', '网络请求失败'));
    }

    // --------------------- 关联关系操作 ---------------------
    function addRelation() {
        const data = {
            odestinationId: document.getElementById('rel-dest-id').value,
            oplayMethodId: document.getElementById('rel-method-id').value,
            orecommendLevel: document.getElementById('rel-level').value
        };

        fetch(`${API_URL}/relations`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        })
            .then(response => handleResponse(response, 'relation-result'))
            .catch(error => showError('relation-result', '网络请求失败'));
    }

    function deleteRelation() {
        const destId = document.getElementById('rel-delete-dest-id').value;
        const methodId = document.getElementById('rel-delete-method-id').value;
        fetch(`${API_URL}/relations/${destId}/${methodId}`, { method: 'DELETE' })
            .then(response => handleResponse(response, 'relation-result'))
            .catch(error => showError('relation-result', '网络请求失败'));
    }

    function updateRelation() {
        const data = {
            odestinationId: document.getElementById('rel-update-dest-id').value,
            oplayMethodId: document.getElementById('rel-update-method-id').value,
            orecommendLevel: document.getElementById('rel-update-level').value
        };

        fetch(`${API_URL}/relations`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        })
            .then(response => handleResponse(response, 'relation-result'))
            .catch(error => showError('relation-result', '网络请求失败'));
    }

    function getRelationsByDestination(destId) {
        fetch(`${API_URL}/relations/destination/${
